<template>
  <basic-container>
    <!-- <el-tabs v-model="activeName">
      <el-tab-pane label="批次追溯" name="批次追溯"> -->
    <div class="header">
      <el-form label-width="100px" :inline="true" :model="form" :rules="rules">
        <el-form-item label="物料编码:" prop="partNo">
          <el-input v-model="form.partNo">
            <el-button slot="append" icon="el-icon-search" @click="openPartModal"></el-button>
          </el-input>
        </el-form-item>
        <el-form-item label="物料批次:" prop="partLot">
          <!-- <el-input v-model="form.partLot" placeholder="请输入物料批次"></el-input> -->
          <el-select v-model="form.partLot" placeholder="请选择">
            <el-option v-for="item in partLotList" :key="item" :label="item" :value="item"> </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="small" icon="el-icon-search" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-divider>基础信息</el-divider>
    <div id="batchPackIdInfo" class="title">
      <div class="titleLeft">
        <i class="el-icon-vertical-bar avue-group__icon"></i>
        <h4>批次包装条码信息</h4>
      </div>
      <span>共{{ batchPackIdInfoData.length }}条记录</span>
    </div>
    <avue-crud :option="batchPackIdInfoOption" :data="batchPackIdInfoData"></avue-crud>
    <el-divider>生产信息</el-divider>
    <div id="productionPickingInfo" class="title">
      <div class="titleLeft">
        <i class="el-icon-vertical-bar avue-group__icon"></i>
        <h4>生产领料信息</h4>
      </div>
      <span>共{{ productionPickingInfoData.length }}条记录</span>
    </div>
    <avue-crud :option="productionPickingInfoOption" :data="productionPickingInfoData"></avue-crud>
    <div id="FeedingInfo" class="title">
      <div class="titleLeft">
        <i class="el-icon-vertical-bar avue-group__icon"></i>
        <h4>上料信息</h4>
      </div>
      <span>共{{ FeedingInfoData.length }}条记录</span>
    </div>
    <avue-crud :option="FeedingInfoOption" :data="FeedingInfoData"></avue-crud>
    <div id="SMTFeedingInfo" class="title">
      <div class="titleLeft">
        <i class="el-icon-vertical-bar avue-group__icon"></i>
        <h4>SMT上料信息</h4>
      </div>
      <span>共{{ SMTFeedingInfoData.length }}条记录</span>
    </div>
    <avue-crud :option="SMTFeedingInfoOption" :data="SMTFeedingInfoData"></avue-crud>
    <el-divider>品质信息</el-divider>
    <div id="inspectionInfo" class="title">
      <div class="titleLeft">
        <i class="el-icon-vertical-bar avue-group__icon"></i>
        <h4>检验信息</h4>
      </div>
      <span>共{{ inspectionInfoData.length }}条记录</span>
    </div>
    <avue-crud :option="inspectionInfoOption" :data="inspectionInfoData"></avue-crud>
    <el-divider>发货信息</el-divider>
    <div id="deliverGoodsInfo" class="title">
      <div class="titleLeft">
        <i class="el-icon-vertical-bar avue-group__icon"></i>
        <h4>发货信息</h4>
      </div>
      <span>共{{ deliverGoodsInfoData.length }}条记录</span>
    </div>
    <avue-crud :option="deliverGoodsInfoOption" :data="deliverGoodsInfoData" ref="deliverGoodsInfo">
      <template slot-scope="{}" slot="menu">
        <el-button icon="el-icon-view" size="small" type="text">查看发货单</el-button>
      </template>
    </avue-crud>
    <!-- </el-tab-pane>
      <el-tab-pane label="包装条码追溯" name="包装条码追溯"></el-tab-pane>
    </el-tabs> -->
    <common-modal-template ref="commonModalTemplate" :option="tableOption" @getSelectedRows="getSelectedRows"> </common-modal-template>
    <div v-if="!sideNav" class="box-card-hide" @click="sideNav = true">
      <i class="el-icon-arrow-right"></i>
    </div>
    <el-card v-if="sideNav" class="box-card">
      <div slot="header" class="clearfix">
        <span>目录</span>
        <el-button style="float: right; padding: 3px 3px" type="info" icon="el-icon-close" circle @click="sideNav = false"></el-button>
      </div>
      <div class="catalogue">
        基础信息
        <ul>
          <li @click="goToLocation('#batchPackIdInfo')">批次包装条码信息</li>
        </ul>
        生产信息
        <ul>
          <li @click="goToLocation('#productionPickingInfo')">生产领料信息</li>
          <li @click="goToLocation('#FeedingInfo')">上料信息</li>
          <li @click="goToLocation('#SMTFeedingInfo')">SMT上料信息</li>
        </ul>
        品质信息
        <ul>
          <li @click="goToLocation('#inspectionInfo')">检验信息</li>
        </ul>
        发货信息
        <ul>
          <li @click="goToLocation('#deliverGoodsInfo')">发货信息</li>
        </ul>
      </div>
    </el-card>
  </basic-container>
</template>
<script>
import CommonModalTemplate from '@/components/common-modal-template/common-modal-template.vue';
import { getTraceabilityRecord, getLotNoList } from '@/api/cloud/cloud_forward-trace-back-to';
export default {
  components: {
    CommonModalTemplate
  },
  data() {
    return {
      sideNav: true,
      // activeName: '批次追溯',
      form: {},
      partLotList: [], //物料批次下拉数据
      rules: {
        partNo: [
          {
            required: true,
            trigger: 'submit',
            validator: (rule, value, callback) => {
              callback();
            }
          }
        ],
        partLot: [
          {
            required: true,
            trigger: 'submit',
            validator: (rule, value, callback) => {
              callback();
            }
          }
        ]
      },
      batchPackIdInfoData: [], //批次包装条码信息
      batchPackIdInfoOption: {
        //批次包装条码信息表格配置
        height: 250,
        calcHeight: 30,
        border: true,
        index: true,
        selection: false,
        addBtn: false,
        refreshBtn: false,
        columnBtn: false,
        menu: false,
        indexLabel: '序号',
        column: [
          {
            label: '包装条码',
            prop: 'packNo'
          },
          {
            label: '包装数量',
            prop: 'packQuantity'
          },
          {
            label: '物料编码',
            prop: 'materialCode'
          },
          {
            label: '物料名称',
            prop: 'materialName'
          },
          {
            label: '物料批次',
            prop: 'materialLotNo'
          },
          {
            label: '存储期限',
            prop: 'storagePeriod'
          },
          {
            label: '供应商名称',
            prop: 'partnerName'
          },
          {
            label: '检验单号',
            prop: 'inspectDocNo'
          },
          {
            label: '生产日期',
            prop: 'manufactureDate'
          },
          {
            label: '入库日期',
            prop: 'inboundDate'
          }
        ]
      },
      productionPickingInfoData: [], //生产领料信息
      productionPickingInfoOption: {
        //生产领料信息表格配置
        height: 500,
        calcHeight: 30,
        border: true,
        index: true,
        selection: false,
        addBtn: false,
        refreshBtn: false,
        columnBtn: false,
        menu: false,
        indexLabel: '序号',
        column: [
          {
            label: '工单号',
            prop: 'workOrderNo'
          },
          {
            label: '物料批次',
            prop: 'materialLotNo'
          },
          {
            label: '包装条码',
            prop: 'packNo'
          },
          {
            label: '包装数量',
            prop: 'packQuantity'
          },
          {
            label: '物料编码',
            prop: 'materialCode'
          },
          {
            label: '物料名称',
            prop: 'materialName'
          },
          {
            label: '领料单号',
            prop: 'sheetNo'
          },
          {
            label: '领料日期',
            prop: 'pickingDate'
          }
        ]
      },
      FeedingInfoData: [], //上料信息
      FeedingInfoOption: {
        //上料信息表格配置
        height: 500,
        calcHeight: 30,
        border: true,
        index: true,
        selection: false,
        addBtn: false,
        refreshBtn: false,
        columnBtn: false,
        indexLabel: '序号',
        menuWidth: 100,
        column: [
          {
            label: '工单号',
            prop: 'workOrderNo'
          },
          {
            label: '上料工序',
            prop: 'processRouteName'
          },
          {
            label: '物料批次',
            prop: 'materialBatchNo'
          },
          {
            label: '包装条码',
            prop: 'packNo'
          },
          {
            label: '使用数量',
            prop: 'packQuantity'
          },
          {
            label: '上料时间',
            prop: 'feedingTime'
          },
          {
            label: '作业人员',
            prop: 'operators'
          }
        ]
      },
      SMTFeedingInfoData: [], //SMT上料信息
      SMTFeedingInfoOption: {
        //SMT上料信息表格配置
        height: 500,
        calcHeight: 30,
        border: true,
        index: true,
        selection: false,
        addBtn: false,
        refreshBtn: false,
        columnBtn: false,
        indexLabel: '序号',
        menu: false,
        column: [
          {
            label: '包装条码',
            prop: 'packNo'
          },
          {
            label: '物料批次',
            prop: 'materialBatchNo'
          },
          {
            label: '上料时间',
            prop: 'feedingTime'
          },
          {
            label: '用料数量',
            prop: 'packQuantity'
          },
          {
            label: '工单号',
            prop: 'workOrderNo'
          },
          {
            label: '站位表',
            prop: 'tableName'
          },
          {
            label: '站号',
            prop: 'trackNo'
          },
          {
            label: '飞达',
            prop: 'feederCode'
          },
          {
            label: '飞达车',
            prop: 'feederBusCode'
          },
          {
            label: '机台号',
            prop: 'machineCode'
          }
        ]
      },
      inspectionInfoData: [], //检验信息
      inspectionInfoOption: {
        //检验信息表格配置
        height: 500,
        calcHeight: 30,
        border: true,
        index: true,
        selection: false,
        addBtn: false,
        refreshBtn: false,
        columnBtn: false,
        indexLabel: '序号',
        menu: true,
        column: [
          {
            label: '物料编码',
            prop: 'materialCode'
          },
          {
            label: '物料名称',
            prop: 'materialName'
          },
          {
            label: '物料批次',
            prop: 'materialLotNo'
          },
          {
            label: '检验类型',
            prop: 'inspectType'
          },
          {
            label: '检验人员',
            prop: 'inspector'
          },
          {
            label: '检验时间',
            prop: 'inspectTime'
          },
          {
            label: '检验结果',
            prop: 'inspectResult'
          }
        ]
      },
      deliverGoodsInfoData: [], //发货信息
      deliverGoodsInfoOption: {
        height: 500,
        calcHeight: 30,
        border: true,
        index: true,
        selection: false,
        addBtn: false,
        refreshBtn: false,
        columnBtn: false,
        indexLabel: '序号',
        menu: false,
        column: [
          {
            label: '物料编码',
            prop: 'materialCode'
          },
          {
            label: '物料批次',
            prop: 'materialLotNo'
          },
          {
            label: '包装条码',
            prop: 'packNo'
          },
          {
            label: '使用数量',
            prop: 'packQuantity'
          },
          {
            label: '工单号',
            prop: 'workOrderNo'
          },
          {
            label: '产品编码',
            prop: 'productNo'
          },
          {
            label: '产品名称',
            prop: 'productName'
          },
          {
            label: '产品型号',
            prop: 'productModel'
          },
          {
            label: '发货单号',
            prop: 'deliveryNo'
          },
          {
            label: '客户名称',
            prop: 'partner'
          },
          {
            label: '发货人员',
            prop: 'consignor'
          },
          {
            label: '发货时间',
            prop: 'deliveryTime'
          }
        ]
      },
      tableOption: {}
    };
  },
  methods: {
    openPartModal() {
      this.$refs.commonModalTemplate.showModal();
      this.tableOption = {
        modalTitle: '物料数据（双击进行选择）',
        url: '/api/mes-admin/part-master/page?semifinished=false',
        isPage: true,
        rowSelectionType: 'single',
        columnDefs: [
          {
            label: '类型',
            prop: 'categoryId',
            search: true,
            type: 'tree',
            dicUrl: '/api/mes-admin/part-category/tree',
            props: {
              label: 'title',
              value: 'id'
            }
          },
          {
            label: '编码',
            prop: 'partNo',
            search: true
          },
          {
            label: '名称',
            prop: 'name',
            search: true
          },
          {
            label: '型号',
            prop: 'partModel'
          },
          {
            label: '描述',
            prop: 'description'
          },
          {
            label: '版本',
            prop: 'revision'
          },
          {
            label: '仓库物料类别',
            prop: 'partType',
            hide: true,
            props: {
              label: 'dictValue',
              value: 'dictKey'
            },
            dicUrl: '/api/blade-system/dict/dictionary?code=part_type'
          }
        ]
      };
    },
    getSelectedRows(rowData) {
      this.$set(this.form, 'partNo', this._get(rowData, 'partNo', ''));
      this.$set(this.form, 'partLot', '');
      let params = {
        partMasterId: rowData.id,
        partMasterType: 'MATERIAL'
      };
      getLotNoList(params).then(
        (res) => {
          this.partLotList = this._get(res, 'data.data', []);
        },
        (error) => {
          this.partLotList = [];
        }
      );
    },
    onSubmit() {
      if (!this.form.partNo) {
        this.$message({
          type: 'warning',
          message: '请选择物料编码！'
        });
        return;
      }
      if (!this.form.partLot) {
        this.$message({
          type: 'warning',
          message: '请选择物料批次！'
        });
        return;
      }
      let params = {
        partNo: this.form.partNo,
        lotNo: this.form.partLot,
        traceType: 'REVERSE'
      };
      getTraceabilityRecord(params).then(
        (res) => {
          this.batchPackIdInfoData = this._get(res, 'data.data.packInfoList', []);
          this.productionPickingInfoData = this._get(res, 'data.data.pickingInfoList', []);
          this.FeedingInfoData = this._get(res, 'data.data.feedingInfoList', []);
          this.SMTFeedingInfoData = this._get(res, 'data.data.smtFeedingInfoList', []);
          this.SMTbuckleMaterialInfoData = this._get(res, 'data.data.smtMaterialUsageList', []);
          this.inspectionInfoData = this._get(res, 'data.data.materialInspectInfoList', []);
          this.deliverGoodsInfoData = this._get(res, 'data.data.deliveryMaterialInfoList', []);
        },
        (error) => {}
      );
    },
    /**
     * 页面内定位表格
     */
    goToLocation(type) {
      console.log($(type).offset());
      console.log($(type).scrollTop + $('#avue-view').scrollTop());
      $('#avue-view').animate(
        {
          scrollTop: $(type).offset().top + $('#avue-view').scrollTop() - 110
        },
        500
      );
    }
  }
};
</script>
<style lang="scss" scoped>
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.title {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0;
  align-items: center;
  height: 35px;
  .titleLeft {
    display: flex;
    align-items: center;
  }
  span {
    color: #0995bb;
  }
}
::v-deep .el-card__body {
  .avue-crud__menu {
    display: none;
  }
}
::v-deep .el-table {
  margin-bottom: 25px;
}
.box-card {
  position: absolute;
  top: 30%;
  right: 1%;
  width: 11%;
  height: 37%;
  z-index: 9999;
  .catalogue {
    ul {
      margin-left: -10px;
      li {
        list-style: disc;
        line-height: 25px;
        cursor: pointer;
      }
    }
  }
}
.box-card-hide {
  position: absolute;
  top: 30%;
  right: 1%;
  width: 50px;
  height: 50px;
  text-align: center;
  line-height: 50px;
  vertical-align: middle;
  background-color: #ffffff;
  border: 1px solid #ebeef5;
  border-radius: 5px;
  box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
  cursor: pointer;
  z-index: 9999;
}
::v-deep .el-form-item__content {
  line-height: 32px;
}
</style>
